<template>
  <div class="my-domain-table">
    <Table
      :loading="loading"
      ref="pushDomianTable"
      :columns="listColumns"
      :data="dataFrom"
      :disabled-hover="true"
      @on-selection-change="selectionChange"
    ></Table>
    <div class="form-page-bottom-area flx-row-bw-c" style="flex-wrap: wrap">
        <div class="flx-row-s-c page-left-area">
          <template v-if="userId == ''">
              <Checkbox
                v-model="tSelectAll"
                @on-change="handleSelectAll"
                class="pub-m-r-27"
                >全选</Checkbox
              >
              <Select
                v-model="batchValue"
                style="width: 200px"
                @on-change="batchChange"
              >
                <Option
                  v-for="item in batchList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              <div
                class="user-strong-button line-button-size"
                style="margin-left: 27px; width: 118px"
                @click="batchEvent"
              >
                批量操作
              </div>
          </template>
      </div>


      <Page
        style="margin-bottom: 10px;"
        :total="pageData.total"
        :current="pageData.page"
        :page-size="pageData.limit"
        :page-size-opts="pageData.pageSizeOpts"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-elevator
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
import { getAuthStatusText } from "@/utils/format";
import myDomainTableTool from "_c/operateTool/myDomainTableTool";

export default {
  name: "myDomainTable",
  comments: {
    myDomainTableTool,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    userId:{
      type:[String,Number],
      default:-1
    },
    pageData: {
      type: Object,
      default: () => {
        return {
          total: 0,
          page: 1,
          limit: 20,
          pageSizeOpts: [20, 50, 100, 150, 200],
        };
      },
    },
  },
  data() {
    return {
      listColumns: [
        {
          width: 50,
          type: "selection",
          align: "center",
        },
        {
          width: 50,
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          title: "域名",
          key: "domainName",
          align: "left",
          render: (h, params) => {
            return h('div',{class:'domainName-box'},[
                      h('Icon', { props: {type: 'md-alert'},
                      style:{
                        color:'#999999',
                        cursor: 'pointer',
                        marginRight: '5px',
                        marginTop: '2px',
                        fontSize:'20px',
                        display: params.row.isPush === 1 ? "none" : 'block'
                      },}),
                      h('span',{class: "table-domainName",style:{display: params.row.isPush === 1 ? 'block' : "none"  } },params.row.domainName),
                      h('span',{class:'table-domainName-isPush',style:{display: params.row.isPush === 0 ? 'block' : "none" } },
                      [h(
                        'Tooltip',
                        {
                          props: {
                            placement: 'top',
                            name: 'true',
                            maxWidth:'300px',
                            theme:"light",
                            content: '此域名正使用系统模板，请过户到自己的模板下。',
                          },
                        },
                        params.row.domainName
                      ),
                    ])
                    ])
          },
        },
        {
          title: "注册时间",
          key: "registrationTime",
          align: "left",
        },
        {
          title: "过期时间",
          key: "expireTime",
          align: "left",
        },
        {
          ellipsis: true,
          title: "命名认证",
          key: "auditStatus",
          align: "left",
          render: (h, params) => {
            return h("span", getAuthStatusText(params.row.auditType, params.row.auditStatus));
          },
        },
        {
          title: "注册商",
          key: "isOutside",
          align: "left",
          render: (h, params) => {
            return h("span", params.row.isOutside === 0 ? "190" : "外部");
          },
        },
        {
          title: "持有状态",
          key: "status",
          align: "left",
          render: (h, params) => {
            let tmpStr;
            let color = '#616161';
            if (params.row.status === 1) {
              tmpStr = "锁定";
            } else if (params.row.status === 2) {
              tmpStr = "转出中";
            } else if(params.row.status === 3){
              tmpStr = "即将到期";
              color = '#fbc02d'
            } else if(params.row.status === 4){
              tmpStr = "续费期";
              color = '#ff3838'
            } else if(params.row.status === 5){
              tmpStr = "赎回期";
              color = '#ff3838'
            } else if(params.row.status === 6){
              tmpStr = "赎回中";
              color = '#ff3838'
            } else{
              tmpStr = "正常";
              color = '#749a19'
            }
            return h(
                "span",
                {
                  style: {
                    color: color
                  }
                },
                tmpStr
            )
          },
        },
        {
          title: "交易状态",
          key: "tradingStatus",
          align: "left",
          render: (h, params) => {
            let tmpStr;
            let color = '#00acc1';
            if (params.row.tradingStatus === 1) {
              tmpStr = "出售中";
            } else if (params.row.tradingStatus === 2) {
              tmpStr = "PUSH中";
            } else if(params.row.tradingStatus === 3){
              tmpStr = "转出中";
            } else if(params.row.tradingStatus === 4){
              tmpStr = "预删除中";
            } else {
              tmpStr = "可交易";
              color = '#749a19'
              if(params.row.status !== 0 || params.row.isPush === 0 || params.row.isLock === 1 || !(params.row.auditType !== 1 || params.row.auditStatus === 2)) {
                tmpStr = "限制中";
                color = '#b0bec5'
              }
            }
            return h(
                "span",
                {
                  style: {
                    color: color
                  }
                },
                tmpStr
            )
          },
        },
        {
          title: "备注",
          width: 130,
          key: "remark",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            return h("Tooltip", {
              props:{
                placement: 'top',
                name: 'true',
                maxWidth:'300px',
                theme:"light",
                content: params.row.remark,
                transfer:true,
              }
            },
            [
              h('span', {
                style: {
                  display: '-webkit-box',
                  width: '120px',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  webkitBoxOrient:"vertical",
                },
              }, params.row.remark)
            ])
          },
        },
        {
          title: "操作",
          width: 250,
          key:'operate',
          align: "left",
          display:'none',
          render: (h, params) => {
            return h(myDomainTableTool, {
              props: {
                domainInfo: params.row
              },
              on: {
                clickEvent: (val) => {
                  switch (val) {
                    case 0:
                      this.$emit("renew", params.row.domainName);
                      break;
                    case 1:
                      this.$router.push({
                        path: `/user/mydn/batchAnalysis/${params.row.id}/${params.row.domainName}`,
                      });
                      break;
                    case 2:
                      this.$router.push({
                        name: "batchDns",
                        params: { dnList: [params.row.domainName] },
                      });
                      break;
                    case 3:
                      this.$router.push({
                        name: "dnpushform",
                        params: { dnList: [params.row.domainName] },
                      });
                      break;
                    case 4:
                      this.$router.push({
                        name: "templatetransfer",
                        params: { dnList: [params.row.domainName] },
                      });
                      break;
                    case 5:
                      this.$router.push({
                        name: "dnsell",
                        params: { dnList: [params.row.domainName] },
                      });
                      // console.log("出售");
                      break;
                    case 6:
                      this.$router.push({
                        path: `/user/mydn/details/${params.row.id}/${params.row.domainName}/${params.row.isOutside}`,
                      });
                      break;
                    case 7:
                      // this.$emit("pay", params.row.id);
                      this.$emit("restore", params.row.domainName);
                      break;
                    case 9: // 设置自动续费
                      this.$emit("autoRenew", params.row.id, 0);
                      break;
                    case 10: // 取消设置自动续费
                      this.$emit("autoRenew", params.row.id, 1);
                      break;
                  }
                },
              },
            });
          },
        },
      ],
      columnsCopy: [
        {
          width: 50,
          type: "selection",
          align: "center",
        },
        {
          width: 50,
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          title: "域名",
          key: "domainName",
          align: "left",
          render: (h, params) => {
            return h('div',{class:'domainName-box'},[
              h('Icon', { props: {type: 'md-alert'},
                style:{
                  color:'#999999',
                  cursor: 'pointer',
                  marginRight: '5px',
                  marginTop: '2px',
                  fontSize:'20px',
                  display: params.row.isPush === 1 ? "none" : 'block'
                },}),
              h('span',{class: "table-domainName",style:{display: params.row.isPush === 1 ? 'block' : "none"  } },params.row.domainName),
              h('span',{class:'table-domainName-isPush',style:{display: params.row.isPush === 0 ? 'block' : "none" } },
                  [h(
                      'Tooltip',
                      {
                        props: {
                          placement: 'top',
                          name: 'true',
                          maxWidth:'300px',
                          theme:"light",
                          content: '此域名正使用系统模板，请过户到自己的模板下。',
                        },
                      },
                      params.row.domainName
                  ),
                  ])
            ])
          },
        },
        {
          title: "注册时间",
          key: "registrationTime",
          align: "left",
        },
        {
          title: "过期时间",
          key: "expireTime",
          align: "left",
        },
        {
          ellipsis: true,
          title: "命名认证",
          key: "auditStatus",
          align: "left",
          render: (h, params) => {
            return h("span", getAuthStatusText(params.row.auditType, params.row.auditStatus));
          },
        },
        {
          title: "注册商",
          key: "isOutside",
          align: "left",
          render: (h, params) => {
            return h("span", params.row.isOutside === 0 ? "190" : "外部");
          },
        },
        {
          title: "持有状态",
          key: "status",
          align: "left",
          render: (h, params) => {
            let tmpStr;
            let color = '#616161';
            if (params.row.status === 1) {
              tmpStr = "锁定";
            } else if (params.row.status === 2) {
              tmpStr = "转出中";
            } else if(params.row.status === 3){
              tmpStr = "即将到期";
              color = '#fbc02d'
            } else if(params.row.status === 4){
              tmpStr = "续费期";
              color = '#ff3838'
            } else if(params.row.status === 5){
              tmpStr = "赎回期";
              color = '#ff3838'
            } else if(params.row.status === 6){
              tmpStr = "赎回中";
              color = '#ff3838'
            } else{
              tmpStr = "正常";
              color = '#749a19'
            }
            return h(
                "span",
                {
                  style: {
                    color: color
                  }
                },
                tmpStr
            )
          },
        },
        {
          title: "交易状态",
          key: "tradingStatus",
          align: "left",
          render: (h, params) => {
            let tmpStr;
            let color = '#00acc1';
            if (params.row.tradingStatus === 1) {
              tmpStr = "出售中";
            } else if (params.row.tradingStatus === 2) {
              tmpStr = "PUSH中";
            } else if(params.row.tradingStatus === 3){
              tmpStr = "转出中";
            } else if(params.row.tradingStatus === 4){
              tmpStr = "预删除中";
            } else {
              tmpStr = "可交易";
              color = '#749a19'
              if(params.row.status !== 0 || params.row.isPush === 0 || params.row.isLock === 1 || !(params.row.auditType !== 1 || params.row.auditStatus === 2)) {
                tmpStr = "限制中";
                color = '#b0bec5'
              }
            }
            return h(
                "span",
                {
                  style: {
                    color: color
                  }
                },
                tmpStr
            )
          },
        },
        {
          title: "备注",
          width: 130,
          key: "remark",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            return h("Tooltip", {
                  props:{
                    placement: 'top',
                    name: 'true',
                    maxWidth:'300px',
                    theme:"light",
                    content: params.row.remark,
                    transfer:true,
                  }
                },
                [
                  h('span', {
                    style: {
                      display: '-webkit-box',
                      width: '120px',
                      whiteSpace: 'nowrap',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      webkitBoxOrient:"vertical",
                    },
                  }, params.row.remark)
                ])
          },
        },
        {
          title: "操作",
          width: 250,
          key:'operate',
          align: "left",
          display:'none',
          render: (h, params) => {
            return h(myDomainTableTool, {
              props: {
                domainInfo: params.row
              },
              on: {
                clickEvent: (val) => {
                  switch (val) {
                    case 0:
                      this.$emit("renew", params.row.domainName);
                      break;
                    case 1:
                      this.$router.push({
                        path: `/user/mydn/batchAnalysis/${params.row.id}/${params.row.domainName}`,
                      });
                      break;
                    case 2:
                      this.$router.push({
                        name: "batchDns",
                        params: { dnList: [params.row.domainName] },
                      });
                      break;
                    case 3:
                      this.$router.push({
                        name: "dnpushform",
                        params: { dnList: [params.row.domainName] },
                      });
                      break;
                    case 4:
                      this.$router.push({
                        name: "templatetransfer",
                        params: { dnList: [params.row.domainName] },
                      });
                      break;
                    case 5:
                      this.$router.push({
                        name: "dnsell",
                        params: { dnList: [params.row.domainName] },
                      });
                      // console.log("出售");
                      break;
                    case 6:
                      this.$router.push({
                        path: `/user/mydn/details/${params.row.id}/${params.row.domainName}`,
                      });
                      break;
                    case 7:
                      // this.$emit("pay", params.row.id);
                      this.$emit("restore", params.row.domainName);
                      break;
                    case 9: // 设置自动续费
                      this.$emit("autoRenew", params.row.id, 0);
                      break;
                    case 10: // 取消设置自动续费
                      this.$emit("autoRenew", params.row.id, 1);
                      break;
                  }
                },
              },
            });
          },
        },
      ],
      selectAll: false,
      // 保存选中的数据
      selectList: [],
      batchValue: "",
      batchList: [
        {
          value: 20,
          label: "批量续费",
        },
        {
          value: 21,
          label: "设置自动续费",
        },
        {
          value: 22,
          label: "取消自动续费",
        },
        {
          value: 23,
          label: "批量设置DNS",
        },
        {
          value: 24,
          label: "开启隐私保护",
        },
        {
          value: 25,
          label: "关闭隐私保护",
        },
        {
          value: 26,
          label: "批量出售",
        },
        {
          value: 27,
          label: "批量PUSH",
        },
        {
          value: 28,
          label: "导出选中",
        },
        {
          value: 29,
          label: "导出全部",
        },
        {
          value: 30,
          label: "批量备注",
        }
      ],
      dataFrom:[]
    };
  },
  computed: {
    // listData: {
    //   get() {
    //     return this.list;
    //   },
    //   set(value) {
    //     this.$emit("update:list", value);
    //   },
    // },
    tSelectAll: {
      get() {
        return this.selectAll;
      },
      set(value) {
        this.$emit("update:selectAll", value);
      },
    },
  },
  watch:{
    userId: {
      deep: true,
      handler (newValue) {
        if (newValue == '') {
          this.listColumns = this.columnsCopy;
        } else {
          this.listColumns = this.columnsCopy.filter((col) => col.key != "operate");
        }
      },
    },
     list: {
      deep: true,
      handler (newValue) {
        this.dataFrom = newValue

      },
    },
  },
  methods: {
    selectionChange(selection) {
      if (selection.length == this.list.length) {
        this.selectAll = true;
      } else if (selection.length > 0) {
        this.tSelectAll = false;
      }
    },
    //点击全选
    handleSelectAll() {
      this.selectAll = !this.selectAll;
      this.$refs.pushDomianTable.selectAll(this.selectAll);
    },
    // 批量类型事件
    batchChange(value) {
/*      console.log(value)
      this.dataFrom = this.list.map((o) => {
        let _disabled = false;
        if (value === 20 || value === 26 || value === 27) {
          // 批量续费  设置DNS 批量出售 批量PUSH
          _disabled = o.status === 5 || o.status === 6
          value === 26 && o.authStatus !== 2 && (_disabled = true);
        } else if (value === 21) {
          // 自动续费
          _disabled =
            o.status === 2 ||
            o.status === 5 ||
            o.status === 6 ||
            o.isAutoRenew === 1;
        } else if (value === 22) {
          // 取消自动续费
          _disabled = o.isAutoRenew !== 1;
        } else if (value === 24) {
          // 设置隐私保护
          _disabled = o.isHide === 0;
        } else if (value === 25) {
          // 取消隐私保护
          _disabled = o.isHide === 1;
        } else if (value === 23) {
          if( o.isPush === 0){
            _disabled = true
          }else{
             _disabled = o.status === 5 || o.status === 6
          }
        }
       return { ...o, _disabled};

      });
      this.tSelectAll = false;*/
    },
    // 批量操作
    batchEvent() {
      if (!this.batchValue) {
        this.$Message.warning("请选择操作类型!");
        return false;
      }
      const selectList = this.$refs.pushDomianTable.getSelection();
      if (selectList.length <= 0 && this.batchValue !== 29) {
        this.$Message.warning("请选择要操作的数据!");
        return false;
      }
      this.$emit("batchEvent", this.batchValue, selectList);
    },
    pageChange(val) {
      this.$emit("pageChange", val);
    },
    pageSizeChange(val) {
      this.$emit("pageSizeChange", val);
    },
  },
  components: {},
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.my-domain-table /deep/ {
  .form-page-bottom-area {
    border: none;
    // position: relative;
    .page-left-area{
     margin-left: -10px;
     margin-bottom: 10px;
     min-width: 200px;
    }
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      color: #000;
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      box-sizing: border-box;
    }
    .ivu-table-row {
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
      }
    }
  }
  .tab-btn:hover {
    color: $mainColor;
    border-color: $mainColor;
  }
  .tab-btn:focus {
    box-shadow: none;
  }
  .domainName-box{
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .table-domainName {
    color: $mainColor;
  }
  .table-domainName-isPush{
    color: #999999;
    cursor: pointer;
  }

}
</style>
